<!--
  Generated template for the MsgPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>消息</ion-title>
    <ion-buttons end>
        <button ion-button (click)="clearAll()" >
            清空
        </button>
      </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content>
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新" refreshingSpinner="bubbles" refreshingText="正在刷新...">
        </ion-refresher-content>
      </ion-refresher>
    
      <ion-searchbar placeholder="输入关键字" [(ngModel)]="searchKey" [showCancelButton]="true" cancelButtonText="取消" (ionInput)="searchOnHandler($event)"
        (ionCancel)="searchOnCancel($event)"></ion-searchbar>
    
      <loading-spinner [isReady]="isReady" [isShow]='isLoading' [isNoData]="!isLoading&&list.length == 0"></loading-spinner>
      <ion-list>
        <button ion-item *ngFor="let item of list" (click)="pToDetail(item)" >
            <span class="readFlagPoint" *ngIf="!item.readFlag"></span>
          <ion-avatar item-start>
                <!-- 0-全局系统消息，1-用户消息，2-告警消息 -->
            <img *ngIf="item.type == 0" src="assets/imgs/img-msg-system.png">
            <img *ngIf="item.type == 1" src="assets/imgs/img-msg-normal.png">
            <img *ngIf="item.type == 2" src="assets/imgs/img-msg-alarm.png">
          </ion-avatar>
          <h2> {{item.title }}</h2>
          <p>{{item.content}}</p>
          <ion-note item-end >{{item.createTime | dateFormatPipe:"MM-dd hh:mm"}}</ion-note>
          <!-- <ion-note item-end *ngIf="item.readFlag" style="color:#fff;background:green;padding:0 5px;font-size:12px;">已读</ion-note>
          <ion-note item-end *ngIf="!item.readFlag" style="color:#fff;background:red;padding:0 5px;font-size:12px;">未读</ion-note> -->
        </button>
      </ion-list>
    
    
      <ion-infinite-scroll *ngIf="!pageObj.isLastPage" (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载中...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
</ion-content>
